<template>
  <div class="app-container">
    <div class="queryContent">
      <el-form :inline="true" ref="role" :model="role" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleNm" placeholder="角色名称" clearable/>
        </el-form-item>

        <el-form-item label="角色状态">
          <el-select v-model="role.roleStatus" placeholder="角色状态" clearable>
            <el-option
              v-for="item in roleStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>

    <div class="buttonContent">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-col :span="21">
            <el-button type="primary" @click="addRole" icon="el-icon-plus">新增</el-button>
          </el-col>
          <el-col :span="3" style="text-align: right;">
            <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="onReset" icon="el-icon-refresh-right">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div class="tableContent">
      <el-table :data="roleList" border style="width: 100%;" :header-cell-style="this.$customUi.grid.title"
                :cell-style="this.$customUi.grid.cell" :style="this.$customUi.grid.style">

        <el-table-column show-overflow-tooltip prop="roleNm" label="角色名称" min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="roleSort" label="排序" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="roleStatus" label="角色状态" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.roleStatus | roleFilter">{{scope.row.roleStatus | roleStatus}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" align="center" min-width="100px">
          <template slot-scope="scope">
            {{scope.row.createTime | formatDate('YYYY年MM月DD日 HH点mm分ss秒')}}
          </template>
        </el-table-column>

        <el-table-column label="操作" sortable align="center" min-width="150px">
          <template slot-scope="scope">
            <el-button type="danger" plain @click="del(scope.row)">删除</el-button>
            <el-button type="success" plain @click="edit(scope.row)">编辑</el-button>
            <el-button type="warning" plain @click="permissions(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageContent">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :current-page=role.current
        :page-size=role.size
        :total=total
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--  新增角色页面  -->
    <role_edit ref="roleEdit" @closeHide="close_dialog"></role_edit>
    <!--  分配权限  -->
    <role_per ref="rolePer" @closeHide="close_dialog"></role_per>
  </div>
</template>

<script>
  import api from '@/api/sysRole'
  import role_edit from './role-edit'
  import role_per from './permissions'

  export default {
    name: 'Menu',
    components: { role_edit,role_per },
    data() {
      return {
        role: {
          // 当前页
          current: 1,
          // 每页显示条数
          size: 10,
          roleNm: '',
          roleStatus: ''
        },
        total: 0,
        roleList: [],
        roleStatus:[
          { value: '0', label: '正常'},
          { value: '1', label: '停用'},
          ]
      }
    },
    filters: {
      roleFilter(status) {
        const statusMap = { 0: 'success', 1: 'danger' }
        return statusMap[status]
      },
      roleStatus(type) {
        const menuType = { 0: '正常', 1: '停用' }
        return menuType[type]
      }
    },
    created() {
      this.onQuery()
    },
    methods: {
      // 查询
      onQuery() {
        var me = this
        api.queryRole(this.role).then(response => {
          if (response.status === 200) {
            me.roleList = response.data.records
            me.total = response.data.total
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        })
      },
      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.role.size = val
        this.onQuery()
      },
      // 分页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.role.current = val
        this.onQuery()
      },
      // 重置
      onReset() {
        this.role.roleNm = ''
        this.role.roleStatus = ''
        this.role.current = 1
        this.role.size = 10
        this.onQuery()
      },
      // 新增
      addRole() {
        this.$refs.roleEdit.open('add', '')
      },
      // 编辑
      edit(row) {
        this.$refs.roleEdit.open('edit', row.id)
      },
      // 分配权限
      permissions(row){
        this.$refs.rolePer.open(row.id)
      },
      // 删除
      del(row) {
        var me = this
        me.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.delRole({id:row.id}).then(response => {
            if (response.status === 200) {
              me.$message({ type: 'success', message: response.msg })
            } else {
              me.$message({ type: 'error', message: response.msg })
            }
            me.onQuery()
          })
        }).catch(() => {
          me.$message({ type: 'info', message: '已取消删除' })
        })
      },
      // 关闭编辑dialog
      close_dialog() {
        this.onQuery()
      }
    }
  }
</script>

<style scoped>

</style>
